<template>
    <div class="cinema-detail-films-container">
        <div class="main">
            <image class="background-img-vague" :src="currentCinemaInfo?.image" style="height: 100%;"></image>
            <MovieList :list="list" v-model="modelValue" @onchangeMovie="onChangeMovie"></MovieList>
            <div class="box"></div>
        </div>
        <div class="info" v-if="currentCinemaInfo">
            <div class="top">
                <div class="title">{{ currentCinemaInfo.filmName }}</div>
                <div class="score" v-if="currentCinemaInfo.score">
                    <div class="name">评分</div>
                    <div class="value">{{ currentCinemaInfo.score }}</div>
                </div>
            </div>
            <div class="bottom" v-if="currentCinemaInfo.filmType && currentCinemaInfo.cast">
                <div class="desc">
                    {{ currentCinemaInfo.filmType }} {{ currentCinemaInfo.cast }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import MovieList from "../../component/movie-list";
import { ref, toRefs, watch } from "vue";
import { onMounted } from "vue";
const props = defineProps({
    //子组件接收父组件传递过来的值
    list: {
        type: Array<any>,
        required: true,
    },
    modelValue: {
        type: [String, Number],
        required: true,
    },
});
//使用父组件传递过来的值
const { list, modelValue } = toRefs(props);
const currentCinemaInfo: any = ref(null)
const emit = defineEmits(["onchangeFilm"]);
// 选择电影
const onChangeMovie = (id) => {
    emit('onchangeFilm', id);
}
onMounted(() => {
    getCurrentCinemaInfo()
})
//监听父组件传递过来的值
watch(modelValue, () => {
    getCurrentCinemaInfo()
})
//根据 影票Id 筛选当前的电影信息
const getCurrentCinemaInfo = () => {
    const currentFilmId = modelValue.value
    currentCinemaInfo.value = list.value.find((item) => {
        return item.id == currentFilmId
    })
}
</script>
<style lang="scss">
.cinema-detail-films-container {
    display: flex;
    flex-direction: column;
    background: #fff;

    .main {
        position: relative;
        overflow: hidden;

        .background-img-vague {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            filter: blur(15px);
            -webkit-filter: blur(15px);
        }

        .box {
            width: 0;
            height: 0;
            border: 10rpx solid;
            border-color: transparent transparent #fff #fff;
            transform: rotate(135deg);
            position: absolute;
            bottom: -10rpx;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
    }

    .info {
        padding: 0 100px 25px 100px;
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            flex-direction: row;
            flex: 1;
            justify-content: center;

            .title {
                font-weight: 500;
                color: #15181d;
                font-size: 28px;
                line-height: 64px;
                display: -webkit-box;
                /* autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .score {
                width: 120px;
                margin-left: 25px;
                display: flex;
                flex-direction: row;
                align-items: center;

                .name {
                    font-size: 24px;
                    line-height: 38px;
                    color: #858a99;
                }

                .value {
                    margin-left: 10px;
                    font-weight: 500;
                    color: #5232B7;
                    font-size: 36px;
                    line-height: 48px;
                }
            }
        }

        .bottom {
            display: flex;
            flex-direction: column;

            .desc {
                font-size: 24px;
                color: #858a99;
                display: -webkit-box;
                /* autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                overflow: hidden;
                text-align: center;
            }
        }
    }
}
</style>
